<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">

    <title>Widgets | jQuery </title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="{{ static_url('jquery-ui-1.12.1/jquery-ui.css') }}">
    <link rel="stylesheet" href="{{ static_url('css/base.css') }}">
    <link rel="stylesheet" href="{{ static_url('jquery/jquery.contextMenu.css') }}">
    <script type="text/javascript" src="{{ static_url('jquery/jquery-3.2.1.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('jquery/jquery.contextMenu.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('js/spin.js') }}"></script>
    <style type="text/css">
        hr {
            height: 5px;
            border: none;
            border-top: 5px groove skyblue;
        }

        #logs {
            margin-left: -20px;
            margin-top: -20px;
            padding-top: 20px;
            position: relative;
            height: 890px;
            background: #e6ecf3;
            float: left;
        }

        #title {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: xx-large;
            color: #fff;
            background-color: #005297;
        }

        .application-log, .application-art {
            text-align: center;
            color: #030303
        }

        .dw-row {
            float: left;
            margin-left: 0;
            margin-right: 0;
            text-align: right;
            line-height: 38px;
        }

        .dw-group {
            padding-top: 5px;
        }

        .form-row {
            width: 100%;
            margin-left: 5px;
            margin-right: 5px;
        }

        .dw-input {
            border: hidden;
            box-shadow: none !important;
            font-size: medium;
            width: 33%;
        }

        .dw-lable {
            padding-left: 10px;
            text-align: right;
        }

        #sidebar {
            height: 850px;
        }

        #content {
            text-align: center;
        }

        .content-right {
            height: 850px
        }

        #listWrapper {
            margin-left: 10px;
            margin-right: 10px;
        }

        table {
            text-align: left;
            table-layout: fixed;
            border: #36ad1f;
            width: 95%;
            margin-bottom: 20px
        }

        table thead tr th {
            text-align: center;
        }

        table > tbody > tr > td {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        ul {
            border: 1px solid;
        }

        nav ul {
            background-color: #cceeff;
            border-color: #77d5f7;
            border-radius: 7px;
        }

        nav ul li {
            float: left;
            color: #fff; /* 设置文字颜色 */
            padding: 0;
        }

        .dw-button {
            border-radius: 5px;
        }

        .dw-select {
            height: 500px;
            overflow-y: scroll;
        }

        #content nav {
            float: right;
            width: 340px;
            margin-right: 30%;
        }
    </style>
    <script type="text/javascript">
        var percent = 0;
        var msg = "";
        var step = "";

        function load() {
            window.go_on = false;
            load_report(1);
            load_commits(1);
        }
        function load_report(page) {
            var url = "/report";
            var data = {
                "op": "report_list",
                "page": page
            };
            var opts = {
                lines: 12             // The number of lines to draw
                , className: 'spinner'  // CSS class to assign to the element
                , top: '50%'            // center vertically
                , left: '50%'           // center horizontally
                , shadow: false         // Whether to render a shadow
                , hwaccel: false        // Whether to use hardware acceleration (might be buggy)
                , position: 'absolute'  // Element positioning
            };
            var target = document.getElementById('report_listWrapper');
            var spinner = new Spinner(opts).spin(target);
            $("#report_listWrapper").load(url, data, function (response, status) {
                window.go_on = true;
                if (status === "error") {
                    alert("对比信息加载失败！");
                    spinner.spin();
                }

            });
        }
        function load_commits(page) {
            var url = "/commits";
            var branch = $("#sidebar_branch").val();
            var since = $("#start_time").val();
            var before = $("#end_time").val();
            var limit = $("#limit").val();

            var opts = {
                lines: 12             // The number of lines to draw
                , className: 'spinner'  // CSS class to assign to the element
                , top: '50%'            // center vertically
                , left: '50%'           // center horizontally
                , shadow: false         // Whether to render a shadow
                , hwaccel: false        // Whether to use hardware acceleration (might be buggy)
                , position: 'absolute'  // Element positioning
            };
            var target = document.getElementById('listWrapper');
            var spinner = new Spinner(opts).spin(target);

            var data = {
                "branch": branch,
                "since": since,
                "before": before,
                "limit": limit,
                "page": page
            };
            $.post(url, data, function (redata, status) {
                if (status === "error") {
                    alert(" git 提交信息加载失败！");
                    spinner.spin();
                    return;
                }
                if (typeof(redata) === "string") {
                    $("#listWrapper").html(redata);
                    return;
                } else if (typeof(redata) === "object") {
                    alert(redata.msg);
                    spinner.spin();
                }
                spinner.spin();
            });
        }

        function create_report(mode) {
            percent = 0;
            msg = "";
            step = "";
            if (mode === 1) {
                var section1 = $("#version_1").val();
                var section2 = $("#version_2").val();
                var section1_info = "";
                var section2_info = "";
                var section1_branch = "";

                if (section2 === "") {
                    alert("请选择分支2！");
                    return;
                }

                if (section1 === section2) {
                    alert("选择了相同的分支，无可比较！");
                    return;
                }

            } else if (mode === 2) {
                section1 = $("#commit_id_1").val();
                section2 = $("#commit_id_2").val();
                section1_info = $("#commit_id_1_info").val();
                section2_info = $("#commit_id_2_info").val();
                section1_branch = $("#commit_id_1_branch").val();

                if (section1 === "" || section2 === "") {
                    alert("请填写commit id！");
                    return;
                }
                if (section1 === section2) {
                    alert("选择了相同的分支，无可比较！");
                    return;
                }
            } else {
                return;
            }

            var data = {
                "mode": mode,
                "section1": section1,
                "section2": section2,
                "section1_info": section1_info,
                "section2_info": section2_info,
                "section1_branch": section1_branch,
                "op": "gen_report"
            };

            $.post("/report", data, function (result) {
                if (result.success) {
                    alert("已生成报告，请在页面下方列表中查看！");
                    $( "#progressbar" ).progressbar( "destroy" );
                    $("#progress-dialog").hide();
                    load_report(1);
                } else {
                    alert(result.msg);
                    $( "#progressbar" ).progressbar( "destroy" );
                    $("#progress-dialog").hide();
                }

            });
            $("#progress-dialog").show();
            $("#progressbar" ).progressbar({
                value: percent
            });
            var timer;
            var get_progress = function () {
                timer = setTimeout(function () {
                    $.getJSON("/report/progress", {}, function (res) {
                        percent = res["progress"];
                        step = res["step"];
                        msg = res["msg"];

                        if (percent < 100) {
                            $("#progress_num").html(percent + "%");
                            $("#progressbar" ).progressbar( "value", percent );
                            $("#progress_info").html(step + " " + msg);
                            get_progress();
                        } else {
                            percent = 0;
                            clearTimeout(timer);
                        }
                    });
                }, 1000)
            };
            get_progress();
        }

        function page_gitlog(current_page) {
            var pageNo = $("#pageNo_l").val();
            if (isNaN(pageNo) || pageNo === '') {
                alert('错误的页码，请重新输入');
                return false;
            }
            if (current_page === pageNo) {
                return true;
            }
            load_commits(pageNo)
        }
        function page_report(current_page) {
            var pageNo = $("#pageNo_r").val();
            if (isNaN(pageNo) || pageNo === '') {
                alert('错误的页码，请重新输入');
                return false;
            }
            if (current_page === pageNo) {
                return true;
            }
            load_report(pageNo)
        }
        function del_report(_id) {
            if (! confirm("确定删除？")){
                return;
            }
            var url = "/report";
            var data = {
                "op": "delete",
                "id": _id
            };
            $.post(url, data, function (result) {
                if (result.success) {
                    alert("删除成功！");
                    load_report(1);
                } else {
                    alert("删除失败！" + result.msg)
                }
            })
        }
    </script>
</head>
<body class="jquery-ui archive category category-widgets category-3 listing" onload="load()">
<div id="title">Art 资源检查工具</div>
<div id="container">
    <div id="content-wrapper" class="clearfix row">
        <div class="content-right twelve columns">
            <div id="content">
                <h2>对比搜索</h2>
                <h4>选择时请将更新的分支或者提交指纹放在左侧，以提高对比的准确度。</h4>
                <hr>
                <div class="form-row">
                    <div class="dw-group">
                        <span style="width: 15%" class="ui-spinner">
                            <label for="version_1">主分支(新)</label>
                        </span>
                        <select id="version_1" style="width: 30%" class="branchswitcher">
                            <option value="develop">develop</option>
                            {% if versions %}
                            {% for version in versions %}
                            <option value="{{ version }}">{{ version }}</option>
                            {% end %}
                            {% end %}
                        </select>
                        <span style="width: 15%" class="ui-spinner">
                            <label for="version_2">对比分支(旧)</label>
                        </span>
                        <select id="version_2" style="width: 30%" class="branchswitcher">
                            <option value="">请选择</option>
                            <option value="develop">develop</option>
                            {% if versions %}
                            {% for version in versions %}
                            <option value="{{ version }}">{{ version }}</option>
                            {% end %}
                            {% end %}
                        </select>
                        <button class="dw-button ui-button" onclick="create_report(1)">生成</button>
                    </div>
                </div>
                <div class="form-row">
                    <div class="dw-group">
                        <span style="width: 15%" class="ui-spinner">
                            <label for="commit_id_1" style="width: 10%">CommitId1(新)</label>
                        </span>
                        <span style="width: 30%" class="ui-spinner ui-corner-all ui-widget ui-widget-content">
                            <input id="commit_id_1" readonly style="width: 97%" class="ui-spinner-input dw-input" type="text">
                            <input type="hidden" id="commit_id_1_info" value="">
                            <input type="hidden" id="commit_id_1_branch" value="">
                        </span>
                        <span style="width: 15%" class="ui-spinner">
                            <label for="commit_id_2" style="width: 10%">CommitId2(旧)</label>
                        </span>
                        <span style="width: 30%" class="ui-spinner ui-corner-all ui-widget ui-widget-content">
                            <input id="commit_id_2" readonly style="width: 97%" class="ui-spinner-input dw-input" type="text">
                            <input type="hidden" id="commit_id_2_info" value="">
                        </span>
                        <button class="dw-button ui-button" onclick="create_report(2)">生成</button>
                    </div>
                </div>
                <hr>
                <div id="report_listWrapper">

                </div>
                    <!-- ui-dialog -->
                <div id="progress-dialog" style="display: none">
                    <div class="ui-widget-overlay ui-front"></div>
                    <div style="position: absolute; width: 350px; height: 100px; left: 50%; top: 50%; margin-left: -160px; margin-top: -50px;"
                         class="ui-widget ui-front ui-widget-content ui-corner-all ui-widget-shadow">
                        <div id="progress">
                            <label id="progress_num"></label>
                            <div id="progressbar"></div><br>
                            <label id="progress_info"></label>
                        </div>
                    </div>
                </div>

            </div>

            <div id="sidebar" class="widget-area" role="complementary">
                <aside class="widget">
                    <div id="logs" class="widget-area application-log">
                        <header class="page-header">
                            <h1 class="page-title">git 提交记录</h1>
                            <hr>
                        </header>
                        <div class="dw-group">
                            <label for="sidebar_branch" class="dw-row dw-lable">分支</label>
                            <select id="sidebar_branch" class="dw-row branchswitcher">
                                {% if branches %}
                                {% for branch in branches %}
                                {% if branch == current_branch %}
                                <option selected="selected">{{ branch }}</option>
                                {% else %}
                                <option>{{ branch }}</option>
                                {% end %}
                                {% end %}
                                {% end %}
                            </select>
                        </div>
                        <div class="dw-group">
                            <label for="start_time" class="dw-row dw-lable">时间</label>
                            <span class="ui-spinner ui-corner-all ui-widget ui-widget-content dw-input">
                                <input id="start_time" readonly class="input_datepicker ui-spinner-input" type="text">
                            </span>
                            <span class="ui-spinner ui-corner-all ui-widget ui-widget-content dw-input">
                                <input id="end_time" readonly class="input_datepicker ui-spinner-input" type="text">
                            </span>
                        </div>
                        <div class="dw-group">
                            前
                            <span class="ui-spinner ui-corner-all ui-widget ui-widget-content dw-input">
                                <input id="limit" class="ui-spinner-input" style="width: 100px" type="text"
                                       onkeypress="return event.keyCode>=48&&event.keyCode<=57">
                            </span>
                            条&nbsp;&nbsp;
                            <button class="dw-button ui-button" onclick="load_commits(1)">查询</button>
                        </div>

                        <hr>
                        <div id="listWrapper"></div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(".branchswitcher").selectmenu({
        width: null,
        classes: {
            "ui-selectmenu-menu": "dw-select"
        }
    });
    $(".input_datepicker").datepicker({
        altFormat: "yy-mm-dd",
        autoSize: true,
        minView: 2,
        inline: true
    });
    $(".controlgroup").controlgroup({
        width: 500
    });

</script>
</body>
</html>
